<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Test for jQuery validate() plugin</title>
    <link rel="stylesheet" media="screen" href="css/screen.css">
    <style>
        .warning {
            color: red;
        }
    </style>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/jquery.mockjax.js"></script>
    <script src="../lib/jquery.form.js"></script>
    <script src="../dist/jquery.validate.js"></script>
    <script>
        jQuery(function () {
            $.mockjax({
                url: "login.action",
                response: function (settings) {
                    var user = settings.data.match(/user=(.+?)($|&)/)[1],
                            password = settings.data.match(/password=(.+?)($|&)/)[1];
                    if (password !== "foobar") {
                        this.responseText = "Your password is wrong (must be foobar).";
                        return;
                    }
                    this.responseText = "Hi " + user + ", welcome back.";
                },
                responseStatus: 200,
                responseTime: 500
            });

            // show a simple loading indicator
            var loader = jQuery('<div id="loader"><img src="images/loading.gif" alt="loading..."></div>')
                    .css({
                        position: "relative",
                        top: "1em",
                        left: "25em",
                        display: "inline"
                    })
                    .appendTo("body")
                    .hide();
            jQuery().ajaxStart(function () {
                loader.show();
            }).ajaxStop(function () {
                loader.hide();
            }).ajaxError(function (a, b, e) {
                throw e;
            });

            var v = jQuery("#form").validate({
                submitHandler: function (form) {
                    jQuery(form).ajaxSubmit({
                        target: "#result"
                    });
                }
            });

            jQuery("#reset").click(function () {
                v.resetForm();
            });
        });
    </script>
</head>
<body>
<h1 id="banner"><a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a> Demo</h1>
<div id="main">
    <form method="post" class="cmxform" id="form" action="login.action">
        <fieldset>
            <legend>Login Form (Enter "foobar" as password)</legend>
            <p>
                <label for="user">Username</label>
                <input id="user" name="user" title="Please enter your username (at least 3 characters)" class="required"
                       minlength="3">
            </p>
            <p>
                <label for="pass">Password</label>
                <input type="password" name="password" id="password" class="required" minlength "5">
            </p>
            <p>
                <input class="submit" type="submit" value="Login">
            </p>
        </fieldset>
    </form>
    <div id="result" class="warning">Please login!</div>
    <br>
    <button id="reset">Programmatically reset above form!</button>
    <a href="index.html">Back to main page</a>
</div>
</body>
</html>
